<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>音频格式检测器（16位音频十六进制字符串）</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 600px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px #0001;
      padding: 32px;
    }

    h1 {
      font-size: 1.5em;
      margin-bottom: 1em;
    }

    textarea {
      width: 100%;
      height: 120px;
      font-family: monospace;
      font-size: 14px;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
      margin-bottom: 16px;
    }

    .result {
      margin-top: 20px;
      font-size: 1.2em;
      font-weight: bold;
    }

    .format-wav {
      color: #007bff;
    }

    .format-mp3 {
      color: #28a745;
    }

    .format-pcm {
      color: #ff9800;
    }

    .format-unknown {
      color: #dc3545;
    }

    button {
      padding: 10px 24px;
      border: none;
      border-radius: 4px;
      background: #007bff;
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      margin-right: 10px;
    }

    button:hover {
      background: #0056b3;
    }

    .desc {
      color: #888;
      font-size: 0.95em;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>音频格式检测器</h1>
    <div class="desc">请输入16位音频的十六进制字符串（支持WAV/MP3/PCM），自动判断音频格式。</div>
    <textarea id="hexInput" placeholder="粘贴或输入音频十六进制字符串..."></textarea>
    <button onclick="detectFormat()">检测格式</button>
    <div class="result" id="result"></div>
  </div>
  <script>
    function hexToBytes(hex) {
      hex = hex.replace(/\s|\n|\r/g, '');
      if (hex.length % 2 !== 0) hex = hex.slice(0, -1); // 补齐
      const bytes = [];
      for (let i = 0; i < hex.length; i += 2) {
        bytes.push(parseInt(hex.substr(i, 2), 16));
      }
      return bytes;
    }

    function detectAudioFormat(bytes) {
      // WAV: 52 49 46 46 ('RIFF'), 57 41 56 45 ('WAVE')
      if (
        bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 &&
        bytes[8] === 0x57 && bytes[9] === 0x41 && bytes[10] === 0x56 && bytes[11] === 0x45
      ) {
        return 'wav';
      }
      // MP3: FF FB (MPEG1 Layer III), FF F3, FF F2, or ID3 (49 44 33)
      if (
        (bytes[0] === 0xFF && (bytes[1] & 0xE0) === 0xE0) ||
        (bytes[0] === 0x49 && bytes[1] === 0x44 && bytes[2] === 0x33)
      ) {
        return 'mp3';
      }
      // PCM: 没有特定头部，且数据长度为偶数且不符合上述格式
      if (bytes.length > 32 && bytes.length % 2 === 0) {
        return 'pcm';
      }
      return 'unknown';
    }

    function detectFormat() {
      const hex = document.getElementById('hexInput').value.trim();
      if (!hex) {
        document.getElementById('result').innerHTML = '<span class="format-unknown">请输入十六进制字符串</span>';
        return;
      }
      let bytes;
      try {
        bytes = hexToBytes(hex);
      } catch (e) {
        document.getElementById('result').innerHTML = '<span class="format-unknown">十六进制字符串无效</span>';
        return;
      }
      const format = detectAudioFormat(bytes);
      let text = '';
      if (format === 'wav') {
        text = '<span class="format-wav">WAV 格式</span>';
      } else if (format === 'mp3') {
        text = '<span class="format-mp3">MP3 格式</span>';
      } else if (format === 'pcm') {
        text = '<span class="format-pcm">PCM 格式（或原始音频数据）</span>';
      } else {
        text = '<span class="format-unknown">未知或不支持的音频格式</span>';
      }
      document.getElementById('result').innerHTML = text;
    }
  </script>
</body>

</html>